<template>
  <div class="container">
    <v-toolBar
      :fullPath="postData.opera"
      :tableColumns="tableColumns"
      @changeLie="getChangeLie"
      @getSearchIPArr="getToolBarSearchIPArr"
      @getSearchIP="getToolBarSearchIP"
    >
    </v-toolBar>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableDataFn"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable"
          :width="item.width"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <v-pagination
      :dataTotal="postData.dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination>
  </div>
</template>

<script>
import { getSqlserverIoDetail } from "@/api/index.js";
import vPagination from "../../../../common/Pagination.vue";
import vToolBar from "../../toolbar/Toolbar.vue";
import tableColumns from "./DbConnectTableColumns.js";
import bus from "common/bus.js";
import { mapMutations } from "vuex";
//IO详情
export default {
  components: {
    vPagination,
    vToolBar,
  },
  data() {
    return {
      postData: {
        opera: "dbConnect",
        curPage: 1,
        pageSize: 20,
        dataTotal: 0,
      },
      tableData: [],

      tableColumns: tableColumns,
      SearchIPArr: [],
      searchJson: {},
      SearchIP: "",
      timerName: "MonitorInfoDataBaseOracleConnect",
      timerEventName: "timerMonitorInfoDataBaseOracleConnect",
      timerInterval: 1000 * 60,
      loading: true,
      Ioitem: {
        instance: "",
        ip: "",
      },
      selectedMonID: "",
    };
  },
  created() {
    this.selectedMonID = this.$store.getters["ItemMonitorSqlServer/getItem"];

    
    this.getTableData();
    this.getToolBarSearchIP(this.selectedMonID.IP);

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorSqlServer", (msg) => {
      this.resetData();
      this.selectedMonID = msg;
      
      this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
    });
  },
  computed: {
    postDataFn() {
      return {
        postData: JSON.stringify(this.postData),
      };
    },
    tableDataFn() {
      return this.tableData.filter((item) => {
        item.dbname = item.instance;
        item.writedata = item.writedata;

        return item.ip==this.selectedMonID.IP;
      });
    },
  },
  methods: {
    ...mapMutations({
      getPagination: "SqlServerIoInfo/pagination",
    }),
    getTableData() {
      this.loading = true;
      this.tableData = [];

      getSqlserverIoDetail().then((res) => {
        // 处理后台返回的数据  无奈
        let itemKey = Object.keys(res);
        let itemValue = Object.values(res);
        let itemBox = [];
        // console.log(itemKey,itemValue)

        itemKey.forEach((item, index) => {
          let itemIp = item.split(",")[0].split("[")[1];
          let iteminstance = item.split(",")[1].split("]")[0];

          if (itemValue[index].length > 0) {
            itemValue[index][0]["ip"] = itemIp;
            itemValue[index][0]["instance"] = iteminstance;
            itemBox.push(...itemValue[index]);
          } else {
            this.Ioitem.ip = itemIp;
            this.Ioitem.instance = iteminstance;
            itemBox.push(this.Ioitem);
          }
        });

        this.postData.dataTotal = itemBox.length;
        this.$store.commit("SqlServerIoInfo/setItem", itemBox);
        // this.$store.commit("SqlServerIoInfo/pagination",this.postData );
        this.getPagination(this.postData);
        this.tableData = this.$store.getters["SqlServerIoInfo/getItem"];

        // this.dataTotal = this.tableData.length;
        // this.tableData = res.data;

        this.loading = false;
      });
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;
      this.getTableData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    getToolBarSearchIPArr(arr) {
      // 获取搜索IP关键字
      this.SearchIPArr = arr;

      this.postData.curPage = 1;
      if (this.SearchIPArr.length > 0) {
        this.postData.filters = {
          ip: this.SearchIPArr,
        };
      } else {
        this.postData.filters = {};
      }

      this.getTableData();
    },
    async getToolBarSearchIP(str) {
      // 获取搜索IP关键字
      this.SearchIP = str;
      this.postData.curPage = 1;
      // this.postData.filters = {
      //   ip: this.SearchIP,
      // };
      // this.getTableData();
      await this.$store.commit("SqlServerIoInfo/SearchItem", this.SearchIP);
      // await this.$store.commit("SqlServerIoInfo/pagination",this.postData );
      this.getPagination(this.postData);
      this.tableData = await this.$store.getters[
        "SqlServerIoInfo/getSearchItem"
      ];
      this.postData.dataTotal = this.tableData.length;
    },
    getChangeLie(val) {
      // 遍历表格列
      this.tableColumns.map((item, index) => {
        // 列的显示隐藏状态改变
        item.isShow = val.includes(item.label);
      });
    },
        resetData(){
            this.dataTotal = 0;
                this.tableData = [];

        }
  },
  watch: {},
  beforeDestroy() {
    // 页面关闭前，移除定时器任务
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
};
</script> 

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>